<template>
  <div class="sotreNav">
    <img v-if="shop.shopLogo" :src="shop.shopLogo" alt="logo" />
    <!-- 店铺信息 -->
    <div class="shopInfo">
      <div class="name">{{ shop.shopName }}</div>
      <div class="address">所在地 <span>{{ shop.shopAdress }}</span></div>
    </div>
    <!-- 收藏 -->
    <div class="icon" @click="collectShop">
      <svg-icon
        v-if="shop.ifCollect === 0"
        style="width: 24px; height: 24px;" name="unCollect" />
      <svg-icon
        v-if="shop.ifCollect === 1"
        style="width: 24px; height: 24px;" name="collect" />
      <span>收藏</span>
    </div>
    <!-- 联系客服 -->
    <div
      v-if="haveService"
      class="icon service"
      @click="collectShop"
    >
      <svg-icon style="width: 30px; height: 30px;" name="shop-service" />
      <span>微信客服</span>
      <div class="qrcodeContainer">
        <canvas class="qrcode" ref="headQrcodeRef"></canvas>
      </div>
    </div>
    <div class="search">
      <el-input
        v-model="keyword"
        placeholder="请输入商品名称"
        maxlength="20"
        @keyup.enter="search"
      />
      <div @click="search">
        <svg-icon class="searchIcon" name="search" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, nextTick, onBeforeMount, shallowRef, ref, toRefs, watch } from 'vue'
import QRCode from 'qrcode'
import SvgIcon from '@/components/svgIcon/index.vue';
import {
  getServiceURL
} from '@/api/product.js'
import {
  postCollect
} from '@/api/user/user.js'

defineComponent({
  name: 'StoreNav'
})
const props = defineProps({
  shop: {
    type: Object,
    default: () => ({
      shopId: null,
      shopLogo: null,
      shopName: null,
      shopAdress: null,
      ifCollect: 0
    })
  }
})
const emit = defineEmits(['search'])
const { shop } = toRefs(props);
const headQrcodeRef = ref();
let keyword = shallowRef('');
let haveService = shallowRef(false);

function search () {
  if (keyword.value === '') {
    ElMessage.warning('请输入搜索内容！')
    return
  }
  emit('search', keyword.value)
}

// 收藏店铺
function collectShop () {
  if (!shop.value.shopId) {
    return;
  }
  postCollect({ shopId: shop.value.shopId }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      ElMessage.success(shop.value.ifCollect === 1 ? "取消收藏" : "收藏成功");
      shop.value.ifCollect = shop.value.ifCollect === 1 ? 0 : 1;
    }
  })
}

function getSercvice () {
  if (!shop.value.shopId) {
    return;
  }
  const shopids = JSON.parse(sessionStorage.getItem("service_shopds")) || [];
  const serviceUrl = JSON.parse(sessionStorage.getItem("service_url")) || [];
  let url = null;
  const index = shopids.indexOf(shop.value.shopId);
  if (index === -1) { // 没用该店铺客服
    getServiceURL({ id: shop.value.shopid }).then(response => {
      const res = response.data;
      url = res.data.url;
      if (!url) {
        return;
      }
      // 缓存处理
      shopids.push(shop.value.shopId);
      serviceUrl.push(url);
      haveService.value = true;
      sessionStorage.setItem("service_shopds", JSON.stringify(shopids));
      sessionStorage.setItem("service_url", JSON.stringify(serviceUrl));
    })
  }
  else {
    haveService.value = true;
    url = serviceUrl[index];
  }
  if (!url) {
    return;
  }
  nextTick(() => {
    QRCode.toCanvas(headQrcodeRef.value, url, error => {
      console.log(error);
    });
  });
}

watch(
  () => shop.value.shopId,
  (_nVal, _oVal) => {
    getSercvice();
  },
)
onBeforeMount(() => {
  getSercvice();
})

</script>

<style lang="scss" scoped>
.sotreNav{
  max-width: 1200px;
  height: 80px;
  margin: auto;
  display: flex;
  align-items: center;
  img{
    width: 58px;
    height: 58px;
  }
  .shopInfo{
    height: 50px;
    margin: 0 15px;
    font-family: Microsoft YaHei;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .name{
      font-size: 20px;
      color: #333333;
    }
    .address{
      font-size: 12px;
      color: #999999;
      span{
        color: #333333;
      }
    }
  }
  .icon{
    width: 60px;
    height: 60px;
    padding: 6px 0;
    margin-left: 15px;
    border: 1px solid #F3F4F5;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    span{
      font-size: 12px;
      font-family: Microsoft YaHei;
      color: #999999;
    }
  }
  .service{
    &:hover{
      color: #C5AA7B;
      background-color: #FAF8F5;
      span{
        color: #C5AA7B;
      }
      .qrcodeContainer{
        display: block;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, .12);
      }
    }
    .qrcodeContainer{
      position: absolute;
      top: 60px;
      z-index: 100;
      display: none;
      background-color: #FFF;
      opacity: 1;
      .qrcode{
        width: 150px !important;
        height: 150px !important;
      }
    }
  }
  .search{
    position: relative;
    flex: 1;
    :deep(.el-input){
      width: 460px;
      float: right;
      .el-input__wrapper{
        border-radius: 0;
      }
    }
    .searchIcon{
      cursor: pointer;
      width: 30px;
      height: 30px;
      position: absolute;
      right: 10px;
      top: 1px;
    }
  }
}
</style>
